<template>
  <div class="my-comments">
      <hm-header>我的跟帖</hm-header>

       <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      :offset="50"
      finished-text="没有更多了"
      @load="onLoad">
      <div class="item" v-for="item in commentList" :key="item.id">
          <div class="time">{{ item.create_data | time('YYYY-MM-DD HH:mm') }}</div>
          <div class="parent" v-if="item.parent">
              <p>回复：{{item.parent.user.nackname }}</p>
              <p>{{ item.parent.content }}</p>
          </div>
          <div class="content"> {{item.content}}</div>
          <div class="origin">
              <p class="one-txt-cut">原文： {{ item.post.title }}</p>
              <span class="iconfont iconjiantou1"></span>
          </div>
      </div>
      </van-list>
  </div>
</template>

<script>
export default {
  data () {
    return {
      commentList: [],
      pageIndex: 1,
      pageSize: 5,
      loading: false,
      finished: false
    }
  },
  created () {
    this.getCommentList()
  },
  methods: {
    async getCommentList () {
      const res = await this.$axios.get('/user_comments', {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      })
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        this.commentList = [...this.commentList, ...data]
        this.loading = false

        if (data.loading < this.pageSize) {
          this.finished = true
        }
        console.log(this.commentList)
      }
    },
    onLoad () {
      console.log('正在加载中...')
      this.pageIndex++
      this.getCommentList()
    }
  }

}
</script>

<style lang="scss" scoped>
.my-comments {
  .item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    line-height: 30px;
    .time {
      color: #888;
      font-size: 12px;
    }
    .content {
      color: #000;
      font-size: 14px;
    }
    .origin {
      color: #888;
      font-size: 12px;
      display: flex;

      .iconjiantou1 {
        margin-left: 15px;
      }
    }
    .parent {
      background-color: #ddd;
      padding: 10px;
      border-radius: 5px;
    //   p:last-child {
    //     font-size: 24px;
    //   }

    }
  }
}
</style>
